<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SVG作业</title>
		<style>
	body {
  background: #fff;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.first {
  position: relative;
  width: 300px;
  height: 100px;
  margin:30px 0px;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}

.box {
  position: absolute;
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background: black;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.box::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(23, 24, 56, 0.5) 50%, rgba(23, 24, 56, 0) 100%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
}
.box::after {
  content: '';
  position: absolute;
  left: -100px;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(23, 24, 56, 0) 0%, rgba(23, 24, 56, 0.5) 50%);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}

@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.3, 1, 1);
            transform: scale3d(1.3, 1, 1);
  }
  55% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  100% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
}

@keyframes scale {
  0% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.3, 1, 1);
            transform: scale3d(1.3, 1, 1);
  }
  55% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  100% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
}
@-webkit-keyframes slide {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}
@keyframes slide {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}
		
		
		
		.second {
  position: relative;
  width: 300px;
  height: 100px;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
		}
		
		.box2 {
  position: absolute;
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background: #dc3023;
  -webkit-animation: slide 3.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 3.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.box2::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 100%;
  background:linear-gradient( rgba(255, 0, 255, 0) 0%, rgba(255, 0, 255, 0.5) 50%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
}
.box2::after {
  content: '';
  position: absolute;
  left: -100px;
  width: 200px;
  height: 100%;
  background:linear-gradient( rgba(255, 0, 255, 0) 0%, rgba(255, 0, 255, 0.5) 50%);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}

</style>
</head>

<body>
	<div>
	<div>
	<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="apple-alt" class="svg-inline--fa fa-apple-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="7.5cm" height="5cm">
		<path fill="currentColor" d="M350.85 129c25.97 4.67 47.27 18.67 63.92 42 14.65 20.67 24.64 46.67 29.96 78 4.67 28.67 4.32 57.33-1 86-7.99 47.33-23.97 87-47.94 119-28.64 38.67-64.59 58-107.87 58-10.66 0-22.3-3.33-34.96-10-8.66-5.33-18.31-8-28.97-8s-20.3 2.67-28.97 8c-12.66 6.67-24.3 10-34.96 10-43.28 0-79.23-19.33-107.87-58-23.97-32-39.95-71.67-47.94-119-5.32-28.67-5.67-57.33-1-86 5.32-31.33 15.31-57.33 29.96-78 16.65-23.33 37.95-37.33 63.92-42 15.98-2.67 37.95-.33 65.92 7 23.97 6.67 44.28 14.67 60.93 24 16.65-9.33 36.96-17.33 60.93-24 27.98-7.33 49.96-9.67 65.94-7zm-54.94-41c-9.32 8.67-21.65 15-36.96 19-10.66 3.33-22.3 5-34.96 5l-14.98-1c-1.33-9.33-1.33-20 0-32 2.67-24 10.32-42.33 22.97-55 9.32-8.67 21.65-15 36.96-19 10.66-3.33 22.3-5 34.96-5l14.98 1 1 15c0 12.67-1.67 24.33-4.99 35-3.99 15.33-10.31 27.67-18.98 37z">
		</path>
	</svg>
	<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="apple-alt" class="svg-inline--fa fa-apple-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"  width="7.5cm" height="4cm">
		 <defs>
           <filter id="f1" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceGraphic" dx="60" dy="60" />
			   <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
           </filter>
         </defs>
		<path filter="url(#f1)" width="90" height="90" stroke="blue" stroke-width="10" fill="yellow"  d="M350.85 129c25.97 4.67 47.27 18.67 63.92 42 14.65 20.67 24.64 46.67 29.96 78 4.67 28.67 4.32 57.33-1 86-7.99 47.33-23.97 87-47.94 119-28.64 38.67-64.59 58-107.87 58-10.66 0-22.3-3.33-34.96-10-8.66-5.33-18.31-8-28.97-8s-20.3 2.67-28.97 8c-12.66 6.67-24.3 10-34.96 10-43.28 0-79.23-19.33-107.87-58-23.97-32-39.95-71.67-47.94-119-5.32-28.67-5.67-57.33-1-86 5.32-31.33 15.31-57.33 29.96-78 16.65-23.33 37.95-37.33 63.92-42 15.98-2.67 37.95-.33 65.92 7 23.97 6.67 44.28 14.67 60.93 24 16.65-9.33 36.96-17.33 60.93-24 27.98-7.33 49.96-9.67 65.94-7zm-54.94-41c-9.32 8.67-21.65 15-36.96 19-10.66 3.33-22.3 5-34.96 5l-14.98-1c-1.33-9.33-1.33-20 0-32 2.67-24 10.32-42.33 22.97-55 9.32-8.67 21.65-15 36.96-19 10.66-3.33 22.3-5 34.96-5l14.98 1 1 15c0 12.67-1.67 24.33-4.99 35-3.99 15.33-10.31 27.67-18.98 37z">
		</path>
    </svg>
	</div>


<div height="30cm">

  <div class="first">
  <div class="box"></div>
  </div>
  <div class="second">
  <div class="box2"></div>
  </div>

</div>



	<div>
		<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg weight="9cm" height="7cm"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="100mm"
   height="127mm"
   viewBox="0 0 100 127"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
   sodipodi:docname="绘图.svg">
  <defs
     id="defs2">
    <filter
       x="-0.25"
       width="1.5"
       y="-0.25"
       height="1.5"
       inkscape:menu-tooltip="Smooth rainbow colors slightly melted along the edges"
       inkscape:menu="Textures"
       inkscape:label="Melted Rainbow"
       style="color-interpolation-filters:sRGB;"
       id="filter88">
      <feGaussianBlur
         result="result8"
         stdDeviation="5"
         id="feGaussianBlur76" />
      <feTurbulence
         baseFrequency="0.015"
         numOctaves="2"
         type="fractalNoise"
         result="result7"
         seed="20"
         id="feTurbulence78" />
      <feComposite
         in="SourceGraphic"
         operator="in"
         result="result6"
         in2="result8"
         id="feComposite80" />
      <feComposite
         in="result6"
         operator="arithmetic"
         result="result2"
         in2="result7"
         k3="1"
         id="feComposite82" />
      <feComposite
         in2="result6"
         operator="in"
         in="result2"
         result="fbSourceGraphic"
         id="feComposite84" />
      <feComposite
         in2="fbSourceGraphic"
         in="fbSourceGraphic"
         k2="2.5"
         operator="arithmetic"
         id="feComposite86" />
    </filter>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="400"
     inkscape:cy="560"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1920"
     inkscape:window-height="1001"
     inkscape:window-x="-9"
     inkscape:window-y="-9"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       sodipodi:type="star"
       style="fill:#ffdd55;stroke-width:0.26458332;filter:url(#filter88)"
       id="path10"
       sodipodi:sides="5"
       sodipodi:cx="71.059526"
       sodipodi:cy="80.79762"
       sodipodi:r1="25.037891"
       sodipodi:r2="12.518946"
       sodipodi:arg1="0.50416596"
       sodipodi:arg2="1.1324845"
       inkscape:flatsided="false"
       inkscape:rounded="0"
       inkscape:randomized="0"
       d="M 92.982144,92.892861 76.372709,92.133145 66.330731,105.38491 61.920666,89.35363 46.214351,83.898162 l 13.883864,-9.148158 0.334941,-16.623427 12.990765,10.377404 15.91332,-4.818374 -5.85513,15.561746 z"
       inkscape:transform-center-x="1.4612779"
       inkscape:transform-center-y="0.95811892" />
  </g>
</svg>
		</div>	

</div>

	
</body>
</html>
